import { LinkOutlined, EnterOutlined } from '@ant-design/icons'
import { Sender, Attachments } from '@ant-design/x'
import { Button, Flex, message, theme } from 'antd'
import { useState } from 'react'
import style from './SenderInput.module.scss'
import { useMessageList } from '../../hooks/useMessageList'
import { useSubmitMsg } from '../../hooks/useSubmit'
import { Attachment } from '@ant-design/x/es/attachments'

export default function SenderInput() {
  const { token } = theme.useToken()
  const { loading } = useMessageList()
  const [value, setValue] = useState<string>('')
  const sendMsg = useSubmitMsg()
  // 显示文件列表
  const [filesList, setFilesList] = useState<Attachment[]>([])

  const iconStyle = {
    fontSize: 18,
    color: token.colorText
  }

  const selectFile = () => {
    const input = document.createElement('input')
    input.type = 'file'
    input.onchange = () => {
      const file = input.files?.[0]
      if (file) {
        console.log(file)
        setFilesList(prevFiles => [
          ...prevFiles,
          {
            uid: prevFiles.length + '',
            name: file.name,
            size: file.size,
            // 模拟上传图片
            thumbUrl:
              'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          }
        ])
      }
    }
    input.click()
    input.style.display = 'none'
    input.remove()
  }

  // 发送消息
  const handleSubmit = async () => {
    if (!value) {
      message.warning('请输入内容')
      return
    }
    // 发送消息
    sendMsg(value)
    // 清空输入框
    setValue('')
  }

  const removeFile = (index: number) => {
    setFilesList(prevFiles => {
      const newFiles = [...prevFiles]
      newFiles.splice(index, 1)
      return newFiles
    })
  }

  // 输入框头部信息，用于显示上传的文件
  const headerNode = (
    <Flex gap="middle" style={{ padding: 15 }}>
      {filesList.map((file, index) => (
        <Attachments.FileCard key={index} item={file} onRemove={() => removeFile(index)} />
      ))}
    </Flex>
  )

  return (
    <div className={style.content}>
      <Sender
        value={value}
        onChange={setValue}
        autoSize={{ minRows: 1, maxRows: 4 }}
        placeholder="请输入内容"
        style={{
          border: 'transparent',
          boxShadow: 'none',
          backgroundColor: '#f7f8fc'
        }}
        header={headerNode}
        footer={({ components }) => {
          const { LoadingButton } = components
          return (
            <Flex justify="space-between" align="center">
              <Flex gap="small" align="center">
                <Button
                  style={iconStyle}
                  type="text"
                  icon={<LinkOutlined />}
                  onClick={selectFile}
                />
              </Flex>

              <Flex align="center">
                {loading ? (
                  <LoadingButton type="default" />
                ) : (
                  <Button
                    shape="circle"
                    icon={<EnterOutlined />}
                    type="primary"
                    disabled={false}
                    onClick={handleSubmit}
                  ></Button>
                )}
              </Flex>
            </Flex>
          )
        }}
        onSubmit={handleSubmit}
        actions={false}
      />
    </div>
  )
}
